<div class="roleList">
    <table>
        <tr>
            <td>&nbsp;</td>
            <td style="width:100px">角色</td>
            <td style="width:100px">境界</td>
            <td style="width:100px">门派</td>
            <td style="width:100px">区服</td>
            <td style="width:50px">　</td>
        </tr>
    </table>
</div>

<script>

for (let i = 0; i < userData.roles.length; i++) {
    const role = userData.roles[i];

    $(".roleList table").append($("<tr></tr>").append(
        $("<td><a></a></td>").html(i == userData.index
            ? $("<span></span>").html("√").addClass("color_1")
            : $("<a></a>").attr({
                "href" : " ",
                "onclick":"return false;",
                "index" : i
            }).addClass("color_0").html(i + 1).click(function() {
                var index = $(this).attr("index");
                userData.index = index;
                $(".role").click();
            }).css("text-decoration", "none")),
        $("<td></td>").html(role.name),
        $("<td></td>").html(role.jj),
        $("<td></td>").html(role.mp),
        $("<td></td>").html(role.fwq),
        $("<td></td>").append(
            $("<a></a>").attr({ "href" : " ",
                                "onclick":"return false;",
                                "index" : i
                            })
                        .html("删")
                        .click(function() {
                            var index = $(this).attr("index");
                            console.log("index:" + index);
                            userData.deleteByIndex(index);
                            $(".role").click();
                        })
        ),
    ));
}

</script>




<div class="toggleDiv">新建角色档案 △ </div>
<div class="addRole">
    <div>
        <label for="userName">角色：</label>
        <input id="userName" type="text" class="input" style="width:116px">
    </div>
    <div>
        <label for="jj_selector">境界：</label>
        <select id="jj_selector" style="width:120px">
            <option value="0"></option>
            <option value="1">百姓</option>
            <option value="2">武士</option>
            <option value="3">武师</option>
            <option value="4">宗师</option>
            <option value="5">武圣</option>
            <option value="6">武神</option>
        </select>
    </div>
    <div>
        <label for="mp_selector">门派：</label>
        <select id="mp_selector" style="width:120px">
            <option value="0"></option>
            <option value="sr">无门无派</option>
            <option value="wd">武当派</option>
            <option value="sl">少林派</option>
            <option value="hs">华山派</option>
            <option value="em">峨眉派</option>
            <option value="xy">逍遥派</option>
            <option value="gb">丐帮</option>
            <option value="ss">杀手楼</option>
        </select>
    </div>
    <div>
        <label for="fwq_selector">区服：</label>
        <select id="fwq_selector" style="width:120px">
            <option value="0"></option>
            <option value="1">一区</option>
            <option value="2">二区</option>
            <option value="3">三区</option>
            <option value="4">四区</option>
        </select>
    </div>
    <div>
        <button class="addNewRole" type="button">新建一个档案</button>
    </div>
    <div style="height:10px;"></div>
</div>

<script>
$(".addRole").hide();
$(".toggleDiv").click(function() {
    $(".addRole").slideToggle(200, function() {
        if ($(".toggleDiv").html() == "新建角色档案 △ ") {
            $(".toggleDiv").html("新建角色档案 ▽ ")
        } else {
            $(".toggleDiv").html("新建角色档案 △ ");
        }
    });
});


role = {
    getName : function() {
        return $("#userName").val();
    },
    getJj : function() {
        return $("#jj_selector option:selected").text();
    },
    getMp : function() {
        return $("#mp_selector option:selected").text();
    },
    getFwq : function() {
        return $("#fwq_selector option:selected").text();
    }
}

$(".addNewRole").click(function() {
    var newRole = {
        name : role.getName(),
        jj : role.getJj(),
        mp : role.getMp(),
        fwq : role.getFwq(),
        skills : [],
        wudaos : [],
    };
    userData.roles.push(newRole);
    userData.save();
    $(".role").click();
});


</script>





<!--
<div class="auth_inputLabel">
        <label>姓名&nbsp;:&nbsp;&nbsp;</label>
    <input id="auth_nameInput" type="text" name="" class="auth_input" />
    <span id="authNameHint" class="authSpanHint"></span>
</div>
<script>
function check() {
    if(!/^[\u4e00-\u9fa5]+$/gi.test(document.getElementById("auth_nameInput").value)){
        $('#authNameHint').html("只能输入汉字!");
        isChinese = false;
    }else{
        isChinese = true;
    }
}
</script>